import 'package:ai/page/text/ScrollList.dart';
import 'package:auto_route/annotations.dart';
import 'package:flutter/material.dart';

import '../../config/Config.dart';
import '../../util/CommonUtils.dart';

@RoutePage()
class TextCreatePage2 extends StatefulWidget {
  const TextCreatePage2({super.key});

  @override
  State<TextCreatePage2> createState() => _TextCreatePage2State();
}

class _TextCreatePage2State extends State<TextCreatePage2> {
  final ScrollController _scrollController = ScrollController();
  double _appBarOpacity = 0.0;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      double offset = _scrollController.offset;
      double opacity = offset / 10;
      if (opacity > 1) opacity = 1;
      setState(() {
        _appBarOpacity = opacity;
      });
    });
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Config.colorB0c9ff.withOpacity(_appBarOpacity),
        centerTitle: true,
        title: const Text("短视频文案"),
        leading: BackButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ),
      body: Stack(
        children: [
          CommonUtils.getImageAsset(
            "bg_create_title",
            fit: BoxFit.fitWidth,
          ),
          Positioned(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: ListView(
                controller: _scrollController,
                children: [
                  Container(
                    height: 48,
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: Config.color729aef,
                        width: 2.0,
                      ),
                      borderRadius: const BorderRadius.all(
                        Radius.circular(8),
                      ),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.all(8),
                      child: Row(
                        children: [
                          CommonUtils.getImageAsset(
                            "ic_prompt_sample",
                          ),
                          const SizedBox(
                            width: 8,
                          ),
                          Container(
                            width: 4.0,
                            height: 50.0,
                            color: Config.color3,
                          ),
                          const SizedBox(
                            width: 8,
                          ),
                          Expanded(
                            child: ScrollList(onTap: (index) {
                              print(index);
                            }),
                          ),
                          Icon(
                            Icons.arrow_forward_ios_rounded,
                            color: Config.color393d48,
                          ),
                        ],
                      ),
                    ),
                  ),
                  const SizedBox(
                    height: 8,
                  ),
                  getTitle("想要的内容", false),
                  const SizedBox(
                    height: 8,
                  ),
                  GridView.builder(
                    gridDelegate:
                        const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 4,
                      childAspectRatio: 2 / 1.4,
                    ),
                    itemCount: 3,
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    itemBuilder: (context, index) {
                      return Card(
                        color: index == 2 ? Config.primaryColor : Colors.white,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(8.0),
                          side: BorderSide(
                            color: index == 2
                                ? Config.primaryColor
                                : Config.colorA3b5e3,
                            width: 1.0,
                          ),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 8),
                          child: Center(
                            child: Text(
                              maxLines: 8,
                              "公众号文章全文",
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  fontSize: 12,
                                  color:
                                      index == 2 ? Colors.white : Colors.black),
                            ),
                          ),
                        ),
                      );
                    },
                  ),
                  const SizedBox(
                    height: 8,
                  ),
                  getTitle("风格", false),
                  const SizedBox(
                    height: 8,
                  ),
                  GridView.builder(
                    gridDelegate:
                        const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 4,
                      childAspectRatio: 2 / 1.4,
                    ),
                    itemCount: 3,
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    itemBuilder: (context, index) {
                      return Card(
                        color: index == 2 ? Config.primaryColor : Colors.white,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(8.0),
                          side: BorderSide(
                            color: index == 2
                                ? Config.primaryColor
                                : Config.colorA3b5e3,
                            width: 1.0,
                          ),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 8),
                          child: Center(
                            child: Text(
                              maxLines: 8,
                              "公众号文章全文",
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  fontSize: 12,
                                  color:
                                      index == 2 ? Colors.white : Colors.black),
                            ),
                          ),
                        ),
                      );
                    },
                  ),
                  const SizedBox(
                    height: 8,
                  ),
                  getTitle("关键词", true),
                  const SizedBox(
                    height: 8,
                  ),
                  getTextField(null),
                  const SizedBox(
                    height: 8,
                  ),
                  getTitle("结果字数", true),
                  const SizedBox(
                    height: 8,
                  ),
                  getNumberField((value) {
                    print(value);
                  }),
                  const SizedBox(
                    height: 8,
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

  Widget getTitle(String title, bool isRequired) {
    var textStyle = TextStyle(
      fontWeight: FontWeight.bold,
      fontSize: 16,
      color: Config.color08070c,
    );
    var requireTextStyle = TextStyle(
      fontWeight: FontWeight.bold,
      fontSize: 16,
      color: Config.colorEc5356,
    );
    if (isRequired) {
      return RichText(
        text: TextSpan(text: title, style: textStyle, children: [
          TextSpan(text: " *", style: requireTextStyle),
        ]),
      );
    }
    return Text(
      title,
      style: textStyle,
    );
  }

  Widget getTextField(ValueChanged<String>? onChanged) {
    return TextField(
      minLines: 8,
      maxLines: 8,
      onChanged: (value) {
        onChanged!(value);
      },
      decoration: InputDecoration(
        focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(width: 2, color: Config.primaryColor),
          borderRadius: const BorderRadius.all(
            Radius.circular(8),
          ),
        ),
        enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(width: 1, color: Config.primaryColor),
          borderRadius: const BorderRadius.all(
            Radius.circular(8),
          ),
        ),
      ),
    );
  }

  Widget getNumberField(ValueChanged<String>? onChanged) {
    return SizedBox(
      height: 48,
      child: TextField(
        minLines: 1,
        maxLines: 1,
        keyboardType: TextInputType.number,
        onChanged: (value) {
          onChanged!(value);
        },
        decoration: InputDecoration(
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(
              width: 2,
              color: Config.primaryColor,
            ),
            borderRadius: const BorderRadius.all(
              Radius.circular(8),
            ),
          ),
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(
              width: 1,
              color: Config.primaryColor,
            ),
            borderRadius: const BorderRadius.all(
              Radius.circular(8),
            ),
          ),
        ),
      ),
    );
  }
}
